<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            border: 0;
            padding: 0;
        }

        body {
            min-height: 100vh;
            background-color: #abefe9;
        }

        body>div {
            margin: 5px;
            border: #bfa 3px solid;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }

        .d1 {
            height: 50px;
            width: 90px;
            overflow: hidden;
            transition: all 1.5s;
            /* 
            过渡(transition )
            通过过渡可以指定一个属性发生变化时的切换方式
            通过过渡可以创建些非常好的效果， 提升用户的体验
        */
            /* 
            transition-property: 指定理执行过渡的属性
            transition-duration:  指定执行过度效果的时间
            transition-timing-function: 指定过渡的时序函数
                ease：默认值，↗↘
                linear：匀速
                ease-in：加速
                ease-out：减速
                ease-in-out：↗↘(加速度大于ease)
                cubic-bezier() 指定时序函数
                    http://cubic-bezier.com
            transition-delay: 执行过度效果的延迟时间
                transition: all 1.5s 2s[后面的是延迟时间];
                steps(n): 分段执行
        */
        }


        .d1 img {
            height: 500px;
        }

        .d1:hover {
            height: 500px;
            width: 890px;
        }

        .d2 {
            height: 242px;
            width: 117px;
            background-image: url(./static/tuzi.png);
            background-position: 0, 0;
            transition: 0.8s steps(4);
            
        }

        .d2:hover {
            background-position: -468px, 0;
        }
    </style>
</head>

<body>
    <div class="d1">
        <img src="/static/3.png" alt="">
    </div>

    <div class="d2">
    </div>
</body>

</html>